<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('slottedAsh.warehousingRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
				<view style="height: 15rpx"></view>
				<!-- <view v-if="data.scanList.length == 0" class="noticeHooks">
					{{ data.scanList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
				</view> -->
				<view class="record-card" v-for="(item, index) in data.scanList" :key="index">
					<!-- <uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30"
						@click="deletList(index, item)"></uni-icons> -->
					<view class="card-mini-head">
						<view class="title-line"></view>
						<text>{{ $t('translationImage.serialNumber') }}：{{ data.scanList.length - index }}</text>
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialCoded') }}：</text>{{ item.barcode }}
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text>{{
								item.materialcode }}
						</view>
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{
								item.materialname }}
						</view>
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{ item.materialspec
						}}
					</view>
					<view class="custom-card-itemOne">
						<view class="card-item-50">
							<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ item.unit }}
						</view>
						<!-- <view class="card-item-50">
							<text class="item-info-title">{{ $t('finishInventory.stockQty') }}：</text>{{ item.currentqty }}
						</view> -->
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('hardware.inventoryQuantity') }}：</text>{{
							Number(item.currentqty) - Number(item.previousqty) }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('slottedAsh.warehousingTime') }}：</text>{{ item.bussinesstime }}
					</view>
					<view class="custom-card-itemOne">
						<text class="item-info-title">{{ $t('slottedAsh.operator') }}：</text>{{ item.createUserName }}
					</view>
					<view class="custom-card-itemOne gui-flex gui-justify-content-end">
						<view class="print-class" @click="deletList(index, item)">
							{{ $t('slottedAsh.delete') }}
						</view>
					</view>
				</view>

				<view v-if="data.noticeHooks" class="noticeHooks">
					{{ data.scanList.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
				</view>

				<!-- 弹框填写数量 -->
				<uni-popup ref="inputDialog" type="center">
					<view class="input-dialog-box">
						<view class="input-dialog-content">
							<view class="input-dialog-item">
								{{ $t('distributedEnter.materialCode') }}：{{ data.list.barcode }}
							</view>
							<view class="input-dialog-item">
								{{ $t('distributedEnter.materialName') }}：{{ data.list.materialname }}
							</view>
							<view class="input-dialog-item" style="padding:20rpx 0;font-weight: 600;color:red">
								{{ $t('slottedAsh.deleteQty') }}： {{ Number(data.list.currentqty) -
									Number(data.list.previousqty) }}
							</view>

						</view>
						<view class="input-dialog-footer">
							<view class="input-dialog-button" @click="cancelFn">
								{{ $t('popup.cancel') }}
							</view>
							<view class="input-dialog-button dialog-button-left" @click="confirmFn">
								{{ $t('popup.confirm') }}
							</view>
						</view>
					</view>
				</uni-popup>
			</scroll-view>
		</template>
	</gui-page>
</template>

<script setup>
// 引入文件
import { reactive, ref, onMounted } from 'vue';
import { useStore } from "vuex";
import { slottedAshInstockHistory, deleteSlottedAshInstock } from '@/api/api.js'
import { OPERATION_DEL, OPERATION_LOOK } from '@/constant/index.js'

// 定义vuex的变量获取数据
let store = useStore();

const data = reactive({
	scanList: [],
	barcode: 'DUSTCARD',
	page: 1,
	rows: 10,
	isFinish: false,
	isLoading: false,
	noticeHooks: false,
	list: '',
	id: ''
})

onMounted(() => {
	history()
})

const history = () => {
	let parmes = {
		barcode: data.barcode,
		page: data.page,
		rows: data.rows
	}
	slottedAshInstockHistory(parmes).then(res => {
		// console.log(res)
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '开槽灰入库'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_LOOK
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		data.noticeHooks = false
		if (data.page == 1) {
			if (res.rows.length == 0) {
				data.noticeHooks = true
			}
			data.scanList = res.rows
		} else {

			data.scanList.push(...res.rows)
		}
		data.noticeHooks = data.scanList.length >= res.total;
		data.isFinish = data.scanList.length >= res.total;
	})
}

// 下拉加载
const scrolltolowerFn = () => {
	console.log(data.isFinish, 'data.isFinishdata.isFinish')
	if (!data.isFinish && !data.isLoading) {
		data.page++
		data.isLoading = true;
		history()
	}
}


//页面弹框输入数量使用的变量
let inputDialog = ref(null);
const deletList = (index, item) => {
	console.log(item)
	data.list = item
	data.id = index
	inputDialog.value.open();//打开弹框
}
// 弹框确定的删除
const confirmFn = () => {
	console.log(data.list)
	deleteSlottedAshInstock(data.list).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '开槽灰入库'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_DEL
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.statusCode == 200) {
			
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			inputDialog.value.close();
			data.page=1
			history()
		}else{
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	})
}

// 弹框的取消按钮
const cancelFn = () => {
	inputDialog.value.close();
}
</script>

<style lang="scss" scoped>
.print-class {
	display: inline-block;
	padding: 10rpx 20rpx;
	background-color: red !important;
	color: #fff;
	border-radius: 8rpx;
	background: $uni-color-teal;
}
</style>
